import React, { memo } from "react"
import PropTypes from "prop-types"
import Popover from "@mui/material/Popover"
import Calendar from "../../components/Calendar"

DatePopover.propTypes = {
  anchorEl: PropTypes.object,
  setAnchorEl: PropTypes.func,
}

function DatePopover(props) {
  const { anchorEl, setAnchorEl } = props
  const handleClose = () => {
    setAnchorEl(null)
  }

  const open = Boolean(anchorEl)
  const id = open ? "simple-popover" : undefined

  return (
    <div>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
      >
        <div className="p-3">
          <Calendar></Calendar>
        </div>
      </Popover>
    </div>
  )
}

export default memo(DatePopover)
